Note: For security reasons the AJAX demos don't work offline. You can view the demos on the RGraph website here: https://www.rgraph.net/demos/index.html

A customised Gauge chart (with AJAX updating)

This Gauge is much like the previous one but with AJAX updating instead of click updating. Because of the AJAX it only works when viewed online - which you can do here.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.gauge.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="250" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var gauge = new RGraph.Gauge({
            id: 'cvs',
            min:0,
            max: 100,
            value: 7,
            options: {
                borderOutline: 'transparent',
                needleColors: ['red'],
                needleType: 'line',
                centerpinRadius: 0.1,
                titleTop: 'Speed',
                labelsOffset: 7,
                textAccessible: true
            }
        }).on('draw', function (obj)
        {
            var co = obj.context;

            // This circle becomes the border of the centerpin
            RGraph.path2(co, ['b', 'a', obj.centerx, obj.centery, 10, 0, RGraph.TWOPI, false, 'f', 'black']);
        })
        .draw();




        var delay = 1500;




        function myAJAXCallback(num)
        {
            gauge.value = num;
            gauge.grow()
            
            
            // Make another AJAX call after the delay (which is in milliseconds)
            setTimeout(function ()
            {
                RGraph.AJAX.getNumber('/getdata.html', myAJAXCallback);
            }, delay);
        }




        /**
        * Make the AJAX call every so often (contolled by the delay variable)
        */
        setTimeout(function ()
        {
            RGraph.AJAX.getNumber('/getdata.html', myAJAXCallback);
        }, delay);
    };
</script>